<template>
    <div i="list-dialog">
        <a-modal
      :title="title"
      :visible="formVisible"
      @cancel="hideFormVisible"
      :footer="footer"
      :width="width">
      <div>
            <div>
              <div>
                <div class="dialog-title">{{title}}</div>
                <a-input-search :placeholder="holder" style="width: 200px" v-model="searchName" @search="val => searchWl(val)"/>
              </div>
              <DataTable rowKey="rowKeys" :showConfig="false" :tableData="tableData" :tableColumn="tableColumn" :pageConfig="pageConfig"></DataTable>
            </div>
        </div>
    </a-modal>
    </div>
</template>
<script>
export default {
    /* eslint-disable */
    name: 'ListDialog',
    props: {
        title: {
            type: String,
            default: ''
        },
        formVisibe: {
            type: Boolean,
            default: true
        },
        width: {
            type: String,
            default: '70%'
        },
        tableColumn: {
            type: Object,
            default: () => ({})
        },
        tableData: {
            type: Array,
            default: () => []
        },
        pageConfig: {
            type: Object,
            default: null
        },
        footer: {
            type: Object,
            default: null
        },
        holder: {
            type: String,
            default: ''
        },
        searchName: {
            type: String,
            default: ''
        }
    },
    methods: {
        hideFormVisible () {
            this.$emit('hideFormVisible')
        },
        searchWl (val) {
            this.$emit('confirm', val)
        }
    }
}
</script>

<style lang="scss">
.dialog-title {
    color: rgba(0, 0, 0, 0.45);
    padding-left: 10px    
}
</style>
